<template>
	<el-container>
        <el-aside width="250px" v-loading="deptLoading">
            <el-container>
                <el-header>
                    <el-input
                        placeholder="输入关键字"
                        title="输入部门名称关键字筛选"
                        style="margin-right: 5px"
                        v-model="deptFilterText"
                        clearable
                    />
                    <el-switch
                        v-model="search.dept_children"
                        class="ml-2"
                        inline-prompt
                        style="--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #aba4a4;"
                        title="是否包含子部门的员工"
                        active-text="子部门"
                        inactive-text="子部门"
                        @change="upSearch()"
                    />
                </el-header>
                <el-main class="nopadding">
                    <el-tree
                        ref="dept"
                        class="menu"
                        node-key="id"
                        :props="treeProps"
                        :data="deptList"
                        :highlight-current="true"
                        :expand-on-click-node="false"
                        :filter-node-method="deptFilterNode"
                        default-expand-all
                        @node-click="treeClick"
                    />
                </el-main>
            </el-container>
        </el-aside>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button icon="el-icon-plus" @click="add" title="点击添加员工">新增</el-button>
					<div class="right-panel-search" style="margin-left:20px">
						<el-input v-model="search.realname" placeholder="姓名/手机号搜索" @clear="upSearch" clearable></el-input>
                        <!-- 过滤器组件 -->
                        <scFilterBar filterName="filterName" :options="filter.options" @filterChange="changeFilter" title="点击打开筛选器">
                            <template #default="{filterLength, openFilter}">
                                <el-badge :value="filterLength" type="danger" :hidden="filterLength<=0">
                                    <el-button icon="el-icon-filter" @click="openFilter">更多筛选</el-button>
                                </el-badge>
                            </template>
                        </scFilterBar>
                        <el-button type="primary" icon="el-icon-search" @click="upSearch" title="立即搜索"></el-button>
                        <el-button type="info" icon="el-icon-download" @click="upSearch" title="按筛选条件导出员工表格">导出</el-button>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="apiObj" stripe remoteSort remoteFilter>
					<el-table-column label="姓名" prop="user.realname" width="100"></el-table-column>
                    <el-table-column label="部门" prop="dept_name" width="100"></el-table-column>
                    <el-table-column label="职位" prop="position_name" width="100"></el-table-column>
					<el-table-column label="性别" prop="sex" width="50">
						<template #default="{row,$index}">
							<span >{{row.user.sex?'男':'女'}}</span>
						</template>
					</el-table-column>
					<el-table-column label="手机号/账号" prop="user.mobile" width="150"></el-table-column>
					<el-table-column label="状态" prop="status" width="60">
						<template #default="scope">
							<sc-status-indicator v-if="scope.row.status" type="success"></sc-status-indicator>
							<sc-status-indicator v-if="!scope.row.status" pulse type="danger"></sc-status-indicator>
						</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" align="right" >
						<template #default="scope">
							<el-button-group>
                                <el-button type="primary" size="small" @click="resumeShow(scope.row, scope.$index)">简历表</el-button>
                                <el-dropdown style="margin-left: 0;">
                                    <el-button type="primary" size="small">
                                        人事管理<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
                                    </el-button>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="employeeEdit(scope.row, scope.$index)">编辑</el-dropdown-item>
                                            <el-dropdown-item>调岗</el-dropdown-item>
                                            <el-dropdown-item>离职</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
<!--									<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">-->
<!--										<template #reference>-->
<!--											<el-button type="primary" size="small">删除</el-button>-->
<!--										</template>-->
<!--									</el-popconfirm>-->
							</el-button-group>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-container>

    <!-- 弹窗 -->
    <add-dialog v-if="dialog.add" ref="addDialog" @reloadData="reloadData" @closed="dialog.add = false" />
    <edit-dialog v-if="dialog.edit" ref="editDialog" @reloadData="reloadData" @closed="dialog.edit = false" />
    <resume-dialog v-if="dialog.resume" ref="resumeDialog" @closed="dialog.resume = false" />

</template>

<script>
import departmentApi from '@/api/company/department'
import addDialog from './add.vue'
import editDialog from './edit.vue'
import resumeDialog from './resume.vue'
import scFilterBar from '@/components/scFilterBar';
import employeeFilter from '@/api/filter/company/employee'

export default {
	name: 'employee',
	components: {
        addDialog,
        editDialog,
        resumeDialog,
        scFilterBar
	},
	data() {
		return {
            deptLoading: true,
            deptList: [],
            treeProps: {
                label: (data) => {
                    return data.name
                }
            },
			dialog: {
                add: false,
                edit: false,
                resume: false
			},
			deptFilterText: '',
			apiObj: this.$API.company.employee.list,
			search: {
				realname: null,
                dept_id: 0,
                dept_children: true,
                _filter: ''
			},
            filter: employeeFilter
		}
	},
	watch: {
		deptFilterText(val) {
			this.$refs.dept.filter(val);
		}
	},
	mounted() {
        departmentApi.list.get().then((res) => {
            this.deptList = res.data
            setTimeout(() => this.deptLoading = false, 300)
        })
	},
	methods: {
        //部门树点击
        treeClick(data) {
            this.search.dept_id = data.id;
            this.upSearch();
        },
        //树过滤
        deptFilterNode(value, data){
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        changeFilter(data){
            this.search._filter = JSON.stringify(data);
            this.upSearch()
        },
		// 子组件刷新数据
		reloadData() {
			this.$refs.table.reload();
		},
		//添加员工窗口
		add() {
			this.dialog.add = true
			this.$nextTick(() => {
				this.$refs.addDialog.open()
			})
		},
		//编辑
		employeeEdit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open().setData(row)
			})
		},
		//查看简历
        resumeShow(row) {
			this.dialog.resume = true
			this.$nextTick(() => {
                console.log(this.$refs.resumeDialog)
				this.$refs.resumeDialog.open(row)
			})
		},

		//调用搜索
		upSearch() {
			this.$refs.table.upData(this.search)
		}
	}
}
</script>

<style>
</style>
